<template>
    <div class="app-container">
        <div id="containerMap" class="container1"></div>
    </div>
  </template>
  
<script>
import { fenceDetail } from "@/api/workmgr/locationFence.js";
import AMapLoader from "@amap/amap-jsapi-loader";

window._AMapSecurityConfig = {
    // 安全密钥
    securityJsCode: "3684ef9a7571deaab4b328c25ffdce45",
};
  export default {
    name: "fenceMap",
    props:{
        id: Number
    },
    data() {
      return {
        dialogVisible:false,
        polygon1:[],
        map:null
      };
    },
    mounted() {
        this.init()
    },
    methods: {
        //地图展示
        init(){
            AMapLoader.load({
                "key": "7b5577c13418c4dd86bfb9a2bdbc0eaa",              // 申请好的Web端开发者Key，首次调用 load 时必填
                "version": "2.0",   // 指定要加载的 JS API 的版本，缺省时默认为 1.4.15
                "plugins": ["AMap.PolygonEditor",'AMap.ToolBar','AMap.MouseTool'],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
            }).then((AMap)=>{
                this.map = new AMap.Map('containerMap',{
                    center: [116.471354, 39.994257],
                    zoom: 16.8
                });

                this.polyEditor = new AMap.PolygonEditor(this.map);
                //编辑初始化数据
                this.getFanceData()
            }).catch(e => {
                console.log(e);
            })
        },
        getFanceData(){
            //有ID则查询围栏经纬度
            fenceDetail(this.id).then(resp=>{
                this.polygon1 = resp.data.locationList
                this.map.add([new AMap.Polygon({
                    path: resp.data.locationList
                })]);
                this.map.setFitView();
            })
        },  
        
    }
}
  </script>

<style>
#containerMap{
  padding:0px;
  margin: 0px;
  width: 100%;
  height: 500px;
}
</style>